<template>
  <div class="">
    <div class="">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <div class="m-t">
      <div class="btnStyle flex-a-c  ">
        <el-button type="primary" size="small" @click="add">新增</el-button>
        <el-upload ref="uploadRefXls" class="upload-demo" action="#" :limit="1" :on-change="handleChangeXls" :auto-upload="false"
          :show-file-list="false" :on-exceed="handleExceedXls" accept=".xls,.xlsx">
          <template #trigger>
            <el-button type="primary" size="small">批量导入</el-button>
          </template>
        </el-upload>
        <el-button type="primary" size="small" @click="download">下载模板</el-button>
        <el-button type="danger" size="small" @click="dels">批量删除</el-button>
      </div>
      <TableCompEle class="m-t" ref="multipleTable" height="50vh" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction"
        :isSelect="true" :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList"
        @handleSelectionChange="handleSelectionChange"></TableCompEle>
    </div>
    <Add ref="addRef" @close="getList" />
    <Comment ref="commentRef" @closeComment="getList" />
  </div>
</template>

<script>
import {
  // getArticleList,
  batchDelete,
  downloadTemplate,
  importResearchDynamics
} from '@/api/publishManage'
import Add from './add.vue'
import Comment from './comment.vue'
export default {
  components: { Add, Comment },
  data() {
    return {
      flag: 0,
      multipleSelection: [],
      queryParams: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      tableConfig: [
        {
          prop: 'title',
          label: '标题'
        },
        {
          prop: 'source',
          label: '来源'
        },
        {
          prop: 'commentCount',
          label: '评论数',
          width: 120
        }
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(180),
        operations: [
          {
            label: '评论',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$refs.commentRef.show({
                title: '评论会议纪要',
                flag: this.flag,
                data: row
              })
            }
          },
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$refs.addRef.show({
                title: '查看会议纪要',
                isLook: true,
                flag: this.flag,
                data: row
              })
            }
          },
          {
            label: '修改',
            isLink: true,
            type: 'primary',
            method: row => {
              this.$refs.addRef.show({
                title: '修改会议纪要',
                isLook: false,
                flag: this.flag,
                data: row
              })
            }
          },
          {
            label: '删除',
            isLink: true,
            type: 'danger',
            method: row => {
              this.deleteFun([row.articleId])
            }
          }
        ]
      },
      queryString: {
        title: '',
        source: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
          this.getList()
        },
        formData: [
          {
            type: 'Input',
            label: '标题',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入标题'
          },
          {
            type: 'Input',
            label: '来源',
            prop: 'source',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入来源'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
            this.getList()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              title: '',
              source: ''
            }
            this.queryParams.currentPage = 1
            this.getList()
          }
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  mounted() { },
  methods: {
    add() {
      this.$refs.addRef.show({
        title: '新增会议纪要',
        isLook: false,
        flag: this.flag
      })
    },
    download() {
      downloadTemplate()
    },
    dels() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择要删除的数据'
        })
        return
      }
      const ids = []
      this.multipleSelection.forEach(items => {
        ids.push(items.articleId)
      })
      this.deleteFun(ids)
    },
    getList() {
      let res = {
        "code": 200,
        "message": "操作成功",
        "data": {
          "pageSize": 10,
          "totalPage": 1,
          "total": 11,
          "list": [
            {
              "articleId": 157,
              "title": "第32期大型仪器开放测试基金评审工作完成 助力资产管理提质增效",
              "source": "北京市科学技术委员会、中关村科技园区管理委员会",
              "content": "京哈第三个回家哈时间就和嘎哈事故和卡视角来看待近两年就能看见这边尽快吧！@#￥%……&*（）——+京哈第三个回家哈时间就和嘎哈事故和卡视角来看待近两年就能看见这边尽快吧！@#￥%……&*（）——+",
              "state": "已发布",
              "fileId": 1161,
              "deleteFlag": "n",
              "createTime": [
                2024,
                1,
                23,
                14,
                51,
                7
              ],
              "createBy": "1",
              "modifyTime": [
                2024,
                1,
                23,
                14,
                53,
                44
              ],
              "modifyBy": "1",
              "version": null,
              "flag": 0,
              "publishTime": null,
              "commentCount": 2
            },
            {
              "articleId": 141,
              "title": "实验室与设备管理部组织召开多模态跨尺度生物医学成像设施动物设施建设协调会",
              "source": "北京市科学技术委员会、中关村科技园区管理委员会",
              "content": "543.0",
              "state": "已发布",
              "fileId": 875,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                6,
                17,
                56,
                20
              ],
              "createBy": "1261",
              "modifyTime": [
                2023,
                6,
                13,
                14,
                45,
                47
              ],
              "modifyBy": "106",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-10 00:00:00",
              "commentCount": 0
            },
            {
              "articleId": 138,
              "title": "厦门大学拔尖学生仪器设备开放创新基金项目成果展第一期",
              "source": "北京市科学技术委员会、中关村科技园区管理委员会",
              "content": "543.0",
              "state": "已发布",
              "fileId": 875,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                6,
                17,
                56,
                20
              ],
              "createBy": "1261",
              "modifyTime": [
                2023,
                6,
                13,
                14,
                45
              ],
              "modifyBy": "106",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-07 00:00:00",
              "commentCount": 0
            },
            {
              "articleId": 135,
              "title": "绩效考评暨建设研讨会召开",
              "source": "北京市科学技术委员会、中关村科技园区管理委员会",
              "content": "当前，人工智能已进入新的发展阶段，成为国际竞争新焦点。对于人工智能的快速发展,全球各大智库机构也都非常重视，针对人工智能进行了多维度研究。中信所AI中心承担科技部新一代人工智能发展研究中心职责，积极开展国际人工智能创新战略情报研究和创新决策支撑研究，为科技部和地方科技管理部门等决策主体提供人工智能战略决策咨询服务。自AI中心成立以来，对人工智能战略研究的要求日益提高，为了提高战略研究支撑服务水平。",
              "state": "已发布",
              "fileId": 844,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                2,
                10,
                38,
                21
              ],
              "createBy": "106",
              "modifyTime": [
                2023,
                6,
                2,
                10,
                38,
                21
              ],
              "modifyBy": "106",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-02 10:38:26",
              "commentCount": 0
            },
            {
              "articleId": 134,
              "title": "华中科技大学来我校参观调研",
              "source": "北京市科学技术委员会、中关村科技园区管理委员会网站",
              "content": "2030年前碳达峰、2060年前碳中和目标（以下简称“双碳”）的提出，是我国面临人类共同挑战时大国担当的体现，也是中华人民中华民族永续发展和构建人类命运共同体的庄严承诺。然而，我国仍以高排放的煤电做为主要发电方式，因此要想如期实现双碳目标，就不得不积极推动电力系统低碳转型。目前，我国已经成为世界光伏发电装机容量最高、综合生产能力最强的国家，光伏发电势必将在我国实现双碳目标的过程中做出巨大的贡献。",
              "state": "已发布",
              "fileId": 843,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                2,
                10,
                36,
                43
              ],
              "createBy": "106",
              "modifyTime": [
                2023,
                6,
                2,
                10,
                36,
                43
              ],
              "modifyBy": "106",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-02 10:36:48",
              "commentCount": 0
            },
            {
              "articleId": 133,
              "title": "可4D观察活鼠胚胎发育的新型智能显微镜问世",
              "source": "北京市科学技术委员会、中关村科技园区管理委员会网站",
              "content": "2022年，矢志复兴的中华民族，迎来了党的二十大胜利召开。处在“两个一百年”的历史交汇点，科技创新能力日益成为国家发展和国际竞争力的核心要素，新的国际形势对我国科技创新产业发展提出了更为迫切的要求。科学数据资源管理领域作为科学技术的原始性创新重要基地，日益成为推动创新成果共享和促进产业融合，加快发展现代产业体系，助力经济体系优化升级，提高国家核心竞争力的重要力量，并不断取得长足的发展和进步。",
              "state": "已发布",
              "fileId": 842,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                2,
                10,
                34,
                24
              ],
              "createBy": "106",
              "modifyTime": [
                2023,
                6,
                2,
                10,
                35,
                29
              ],
              "modifyBy": "106",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-02 10:34:36",
              "commentCount": 0
            },
            {
              "articleId": 126,
              "title": "超冷气体中玻色子激励效应首现 ",
              "source": "科技日报",
              "content": "玻色子是粒子的两个基本类别之一，一直是无数物理学研究的焦点。当玻色子粒子转变到已被占据的最终量子态时，这种转变的速度会因其所谓的“占位数”而增加，这种效应被称为玻色子激励。玻色子激励在光散射过程中的出现是在30多年前首次预测的，但到目前为止，在实验环境中直接观察它具有挑战性。\n",
              "state": "已发布",
              "fileId": 821,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                1,
                9,
                33,
                47
              ],
              "createBy": "1261",
              "modifyTime": [
                2023,
                6,
                1,
                9,
                33,
                47
              ],
              "modifyBy": "1261",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-01 09:33:51",
              "commentCount": 0
            },
            {
              "articleId": 125,
              "title": "实验室与设备管理部组织召开多模态跨尺度生物医学成像设施动物设施建设协调会",
              "source": "北京市科委、中关村管委会网站",
              "content": "基于纳米纤维的正渗透膜（eTFC-FO）作为一种渗透压驱动的新型膜分离技术，具有水通量高、能耗低、膜污染轻等优点。同时，纳米纤维膜具有高孔隙率、贯穿孔道结构和膜厚度可控的特性，其作为eTFC-FO膜的基膜，能够有效降低水在基膜中的传质阻力和运行过程中的内浓差极化现象。因此，eTFC-FO膜有望应用于高盐废水（如脱硫废水）的处理中。但纳米纤维膜表面孔径过大，不利于生成高选择性的eTFC-FO膜",
              "state": "已发布",
              "fileId": 820,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                1,
                9,
                33,
                1
              ],
              "createBy": "1261",
              "modifyTime": [
                2023,
                6,
                1,
                9,
                33,
                1
              ],
              "modifyBy": "1261",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-01 09:33:04",
              "commentCount": 0
            },
            {
              "articleId": 124,
              "title": "空间多模态数据的交互可视化探索工具",
              "source": "北京市科委、中关村管委会网站",
              "content": "通过对组织器官的原位基因表达信息分析，高分辨率空间转录组学极大地提升了科研人员对组织结构的理解，从而在神经科学、发育生物学以及疾病研究等重要领域取得了突破。随着空间转录组学为代表的空间多组学技术的不断发展，其在空间多模态数据构建图谱以及疾病诊断治疗中发挥了越来越重要的作用，不仅揭示了新的疾病特征，还能诠释异常的细胞状态与病变组织关联起来的潜在因果机制。",
              "state": "已发布",
              "fileId": 819,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                1,
                9,
                31,
                55
              ],
              "createBy": "1261",
              "modifyTime": [
                2023,
                6,
                1,
                9,
                31,
                55
              ],
              "modifyBy": "1261",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-01 09:32:26",
              "commentCount": 0
            },
            {
              "articleId": 123,
              "title": "怀柔政策宣讲暨供需对接会成功举办",
              "source": "北京市科委、中关村管委会网站",
              "content": "科研人员对我国嫦娥五号采集的月壤中主要矿物进行了系统的表面微结构分析，他们在铁橄榄石表面发现了非常薄的氧化硅非晶层，这其中包裹着大小为2到12纳米的氧化亚铁颗粒，并非此前在其他月壤样品中发现的金属铁颗粒。另外，科研人员在铁橄榄石中还观察到了分层的边缘结构，这是首次在月球土壤中观察到这种特殊的微结构。这些新发现支持了铁橄榄石在太空风化作用下发生分步分解的观点，对于理解太空风化机理和地外星体遥测具有重",
              "state": "已发布",
              "fileId": 818,
              "deleteFlag": "n",
              "createTime": [
                2023,
                6,
                1,
                9,
                18,
                10
              ],
              "createBy": "1261",
              "modifyTime": [
                2023,
                6,
                1,
                9,
                18,
                10
              ],
              "modifyBy": "1261",
              "version": null,
              "flag": 0,
              "publishTime": "2023-06-01 09:18:13",
              "commentCount": 0
            }
          ],
          "page": 1
        }
      }
      // getArticleList(
      //   Object.assign(
      //     {
      //       currentPage: this.queryParams.currentPage,
      //       pageSize: this.queryParams.pageSize
      //     },
      //     this.queryString,
      //     { flag: this.flag }
      //   )
      // ).then(res => {
      this.queryParams.total = res?.data?.total ?? 0
      this.tableData = res?.data?.list ?? []
      // })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteFun(ids) {
      this.$confirm(`确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          batchDelete({
            ids: ids
          }).then(() => {
            this.$refs.multipleTable.clearSelection()
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // xls
    handleChangeXls(file) {
      const _file = file?.raw ?? file
      const formData = new FormData()
      formData.append('file', _file)
      formData.append('pathType', file.name.split('.').pop())
      importResearchDynamics(formData).then(() => {
        this.getList()
      })
    },
    // 多次上传覆盖
    handleExceedXls(file) {
      this.$refs.uploadRefXls.clearFiles()
      this.handleChangeXls(file[0])
    }
  }
}
</script>

<style lang="less" scoped>
  .upload-demo {
    padding: 0 10px;
  }
</style>
